
<template>
<div class="photoInfo-container">
    <h3>{{ photoInfo.title }}</h3>
    <p class="subtitle">
        <span>发表时间:{{ photoInfo.add_time }}</span>
        <span>点击次数:{{ photoInfo.click }}</span>
    </p>
    <hr>
    <!-- 缩略图 -->
    <!-- 使用的是 vue-preview 图片预览插件 -->
    <vue-preview :slides="slide1" @close="handleClose" class="preview"></vue-preview>

    <!-- 图片描述内容 -->
    <div class="content" v-html="photoInfo.content"></div>

    <!-- 评论子组件 -->
    <cmt-box></cmt-box>
</div>  
</template>

<script>
// 导入评论子组件
import comment from "../subcomponents/comment.vue"
export default{
    data(){
        return {
            id:this.$route.params.id,
            photoInfo:{},
            // 缩略图数组
            slide1: [
            ]
        }
    },
    created(){
        this.getPhotoInfo();
        this.getPreviewPic();
    },
    methods:{
        getPhotoInfo(){
            // 获取图片的详细信息
            this.$http.get("http://127.0.0.1/vue.js/项目练习/api/json/photoInfo.json").then(result => {
                this.photoInfo = result.body.message[0];
            })
        },
        // 获得缩略图的信息
        getPreviewPic(){
            this.$http.get("http://127.0.0.1/vue.js/项目练习/api/json/previewPic.json").then(result => {
                this.slide1 = result.body.message;
            })
        },
        handleClose () {
            console.log('close event')
        }
    },
    components:{// 注册 子组件
        'cmt-box':comment
    }
}

</script>
<style lang="less" scoped>
    .photoInfo-container{
        padding: 3px;
        h3{
            color: #26a2ff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0px;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
            margin: 10px 0px;
        }
    }
</style> 